<template>
  <div class="yearplan-list">
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      no-data-text="该查询条件没有任何数据"
      class="mt20">
    </Table>

    <div class="m10 clearfix" v-if="page.total > 0">
      <div class="fr">
        <Page
          show-total
          :total="page.total"
          :current="query.currentPage"
          @on-change="onChangePage">
        </Page>
      </div>
    </div>

    <update-modal :form="form" @submit="getList"></update-modal>
    <detail-modal :form="detailForm" @submit="getList"></detail-modal>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import yearplanApi from '@/api/yearplan'
  import updateModal from './update-modal'
  import detailModal from './detail-modal'

  export default {
    name: 'yearplan-list',
    components: {
      updateModal,
      detailModal
    },
    props: [
      'query'
    ],
    data () {
      return {
        loading: false,
        page: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            width: 50,
            align: 'center',
            render: (h, params) => {
              return (this.query.currentPage - 1) * this.query.limit + params.row._index + 1
            }
          },
          {
            title: '计划名称',
            align: 'center',
            render: (h, params) => {
              let { row } = params
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  style: {
                    marginLeft: '-10px'
                  },
                  on: {
                    click: () => {
                      this.showDetailModal(params.row)
                    }
                  }
                }, row.act_name)
              ])
            }
          },
          {
            title: '活动类型',
            align: 'center',
            key: 'act_type_name'
          },
          {
            title: '计划时间',
            align: 'center',
            key: 'act_sdate',
            render: (h, params) => {
              let { row } = params
              return moment(row.act_sdate).format('YYYY-MM') + '至' + moment(row.act_edate).format('YYYY-MM')
            }
          },
          {
            title: '年份',
            align: 'center',
            key: 'act_year_name'
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showDetailModal(params.row)
                    }
                  }
                }, '查看'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showUpdateModal(params.row)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.onRemove(params.row)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        list: [],
        form: {
          visible: false,
          data: {},
          template: {}
        },
        detailForm: {
          visible: false,
          data: {}
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      showCreateModal () {
        this.form.data = Object.assign({}, this.form.template)
        this.form.visible = true
      },
      async showDetailModal (detail) {
        const { body } = await yearplanApi.detail({
          pk_rclub_info: detail.pk_rclub_info,
          pk_act_year_plan: detail.pk_act_year_plan
        })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.detailForm.data = body.responseData
          this.detailForm.visible = true
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      async showUpdateModal (detail) {
        const { body } = await yearplanApi.detail({
          pk_rclub_info: detail.pk_rclub_info,
          pk_act_year_plan: detail.pk_act_year_plan
        })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.form.data = this.$service.translate2date(body.responseData)
          this.form.visible = true
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      onRemove (detail) {
        this.$Modal.confirm({
          title: '确认删除吗',
          content: '<p>删除后将不能恢复，确定删除？</p>',
          onOk: () => {
            this.remove(detail)
          }
        })
      },
      async remove (detail) {
        const { body } = await yearplanApi.remove({ pk_act_year_plan: detail.pk_act_year_plan })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('删除成功')
          this.getList()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      async getList () {
        this.loading = true
        this.query.pk_rclub_info = this.userInfo.pkRclubInfo
        const { body } = await yearplanApi.list(this.query)
        const { responseData } = body
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.loading = false
          this.list = this.$service.translate2date(responseData.content)
          this.page.total = responseData.totalElements
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      }
    },
    mounted () {
      this.$store.dispatch('getUserInfo')
      this.getList()
      this.$on('getList', this.getList)
    }
  }
</script>
